<template>
  <div class="container">
    <div class="title-area">
      <slot name="title"></slot>
    </div>
    <div class="content-area">
      <slot name="content"></slot>
    </div>
    <div class="footer-area">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 350px;
  height: 250px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-area {
  align-self: flex-start;
}

.content-area {
  flex-grow: 1;
  overflow-y: auto;
}

.footer-area {
  align-self: flex-end;
}
</style>
